<template>
  <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
  <view class="topNav" :style="{minHeight:navHeight+'px',paddingTop:statusBarHeight+'px', background: background}">
    <slot>
      <view class="nav-left" :style="{textAlign:align, color:color, fontSize: fontSize}">
        <u-icon  v-if="isBack" name="arrow-left" size="36" @click="back"></u-icon>
        {{ title }}
      </view>
    </slot>
  </view>
</template>

<script>
export default {
  props: {
    isBack: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: ''
    },
    fontSize: {
      type: String,
      default: '36rpx'
    },
    color: {
      type: String,
      default: '#333'
    },
    title: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
      navHeight: "", // 导航栏高度
      statusBarHeight: '', // 状态栏高度
    }
  },
  created() {
    //获取手机系统的信息 里面有状态栏高度和设备型号
    let {
      statusBarHeight,
      system
    } = uni.getSystemInfoSync()
    // 注意返回的单位是px 不是rpx
    console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
    this.statusBarHeight = statusBarHeight
    // 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
    // 这个高度刚好和胶囊对齐
    this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
    console.log(this.navHeight, "导航栏高度");
  },

  methods: {
    back() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.topNav {
  height: 100rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 32rpx;
  box-sizing: border-box;
  font-weight: 600;
}

.nav-left {
  margin-right: 24rpx;
}
</style>
